<template>
  <div class="header">
    <div class="m-header">
      报告查询
    </div>
    <div class="m-h2">

    </div>
    <div class="p-header">
        <div class="w1200">
            <!-- <div class="top">

                    </div> -->
            <ul class="menu">
            <li
                class="m-item"
                v-for="(item,index) in navs"
                :key="index"
            >
                <a :href="item.url">{{item.label}}</a>
            </li>
            </ul>
        </div>
    </div>
    <div class="p-h2">

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgList: {},
      imgUrl: "",
      fullWidth: document.documentElement.clientWidth,
      navs: [
        {
          label: "关于我们",
          url: "http://www.tiangen.com/?about.html"
        },
        {
          label: "新闻中心",
          url: "http://www.tiangen.com/?news.html"
        },
        {
          label: "产品中心",
          url: "http://www.tiangen.com/?productAll.html"
        },
        {
          label: "在线讲座",
          url: "http://www.tiangen.com/elearning/index/jiangzuo.asp"
        },
        {
          label: "解决方案",
          url: "http://www.tiangen.com/?case.html"
        },
        {
          label: "资料下载",
          url: "http://www.tiangen.com/?down.html"
        },
        {
          label: "技术活动",
          url: "http://www.tiangen.com/?Lecture.html"
        },
        {
          label: "诚聘英才",
          url: "http://www.tiangen.com/?aboutJob.html"
        },
        {
          label: "联系我们",
          url: "http://www.tiangen.com/?Contact.html"
        }
      ]
    };
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy: function() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize(event) {
      this.fullWidth = document.documentElement.clientWidth;
    },
    async getImg() {
      let res = await this.$api.get("/api/banner", {});
      this.imgList = { ...res };
      if (this.fullWidth > 1000) {
        this.imgUrl = res.pc_url;
      } else {
        this.imgUrl = res.mobile_url;
      }
    }
  },
  mounted() {
    // this.getImg()
  }
};
</script>
<style lang="scss">
.header {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  position: relative;
  font-size: 12px;
  .m-header {
    display: none;
  }
  .m-h2 {
    display: none;
  }
  .p-h2 {
    width: 100%;
    height: 300px;
    background: url("../assets/images/p1.png") no-repeat;
    background-size: 1300px 300px;
    background-position:center;
    display: block;
  }
  .p-header {

    position: absolute;
    width: 100%;
    height: 142px;
    display: block;
    .w1200 {
      background: url("../assets/images/head.png") no-repeat;
      width: 1300px;
      height: 100%;
      margin: 0 auto;
      position: relative;
      //    .top{
      //        width:120px;
      //        height: 24px;
      //        border-radius: 12px;
      //        background-color: red;
      //        position: absolute;
      //        top:10px;
      //        right: 0;
      //    }
      .menu {
        margin-left: 400px;
        width: 100%;
        line-height: 142px;
        display: flex;
        .m-item {
          //    float: right;
          color: #fff;
          margin-left: 30px;
          cursor: pointer;
          a {
            text-decoration: none;
            color: white;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1000px) {
  .header {
    width: 100%;
    height: 3.68rem;
    .m-header {
      width: 100%;
      height: 0.88rem;
      background: url("../assets/images/mh.png") no-repeat;
      background-size: cover;
      display: block;
      padding-right: 0.25rem;
      line-height: 0.88rem;
      text-align: right;
      font-size: 0.3rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
    }
    .m-h2 {
      width: 100%;
      height: 2.8rem;
      background: url("../assets/images/m2.png") no-repeat;
      background-size: cover;
      display: block;
    }
    .p-h2 {
      display: none;
    }
    .p-header {
      display: none;
    }
  }
}
</style>